<template>
  <div>
    <span v-if="showUpBtn" style="font-size: 14px;margin-right: 10px;">
      <span style="color: #666;">试用到期时间:</span>
      <span style="color: #ff0000;">{{licenseInfo.only_read_area.trial_expire || ''}}</span>
    </span>
    <el-button v-if="showUpBtn" class="upBtn" icon="el-icon-upload2" size="small" :loading="loading"
      style="margin-top: 5px;" @click="showUpLicenseDialog">升级到专业版</el-button>

    <el-button v-if="showUpBtn" size="small" type="primary" @click="showewm = true" style="border: 1px solid rgba(228, 190, 158, 0);">加入群聊</el-button>
    <el-button v-if="showUpBtn" size="small" type="success" @click="serviceContact"
      style="border: 1px solid rgba(228, 190, 158, 0);margin-right: 10px;">联系客服</el-button>

    <el-dialog title="升级到专业版" :visible.sync="show" width="500px" :append-to-body="true" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false">
      <el-input v-model="inputValue" placeholder="请输入授权码">
        <template slot="suffix">
          <a v-if="purchaseurl != ''" class="upgrade-link" @click="gotoPurchaseUrl">购买授权码</a>
        </template>
      </el-input>
      <div slot="footer" class="dialog-footer">
        <!-- <a href="https://www.youdeyunke.com/" target="_blank" class="upgrade-link">了解更多版本信息</a> -->
        <div class="upgrade-link" @click="gotolicense">了解更多版本信息</div>
        <div>
          <el-button :loading="loading" @click="show = false">取 消</el-button>
          <el-button :loading="loading" class="upBtn" @click="upLicense">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="加入群聊" :visible.sync="showewm" width="500px" :append-to-body="true">
      <div style="text-align: center;">
        <img style="width: 460px;" :src="require('@/assets/images/qunliao.jpg')" alt="">
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getLicenseInfo,
  refreshLicenseInfo,
  replaceLicenseInfo,
  updateLogo,
  updateCompanyName,
} from "@/api/licenseinfo";
export default {
  data: function () {
    return {
      show: false,
      inputValue: "",
      purchaseurl: "",
      showUpBtn: false,
      loading: false,
      showewm: false,
    };
  },

  mounted: function () { },

  mounted() {
    this.loadData();
  },
  methods: {
    gotoPurchaseUrl() {
      window.open(this.purchaseurl);
    },
    gotolicense() {
      this.show = false;
      var _this = this;
      this.$router.push({ path: _this.licenseInfo.only_read_area.more_license_info });
    },
    loadData() {
      this.loading = true;
      var _this = this;
      getLicenseInfo().then((resp) => {
        if (resp.code != 0) {
          return;
        }
        _this.licenseInfo = resp.data;
        _this.loading = false;
      });
    },
    showUpLicenseDialog() {
      this.show = true;
    },
    serviceContact() {
      window.open('https://work.weixin.qq.com/kfid/kfc8a0f8817daf2ec01')
    },
    upLicense() {
      var _this = this;
      this.loading = true
      const pattern = /^[0-9A-Z]{4}-[0-9A-Z]{4}-[0-9A-Z]{4}-[0-9A-Z]{4}$/;
      // if (!pattern.test(_this.inputValue)) {
      //   _this.$message.error('授权码格式错误')
      //   this.loading = false
      //   return
      // }
      if (!pattern.test(_this.inputValue)) {
        _this.$message.error("授权码格式错误");
        this.loading = false;
        return;
      }
      replaceLicenseInfo(_this.inputValue).then((resp) => {
        this.loading = false;
        if (resp.code != 0) {
          return;
        }
        this.$message.success("激活授权码成功");
        _this.licenseInfo = resp.data;
        if (_this.licenseInfo.only_read_area.NAME == "1") {
          _this.showUpBtn = true;
        } else {
          _this.showUpBtn = false;
        }
        _this.$router.push({ path: _this.licenseInfo.only_read_area.more_license_info });
        _this.show = false;
        _this.inputValue = "";
      });
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.upgrade-link {
  line-height: 40px;
  font-size: 12px;
  color: #e4be9e;
  margin-right: 10px;
  cursor: pointer;
}

.upBtn {
  background-color: #333333;
  color: #E4BE9E;
  border: 1px solid rgba(228, 190, 158, 0);
}

.upBtn:hover,
.upBtn:focus {
  color: #E4BE9E;
  background-color: rgba(51, 51, 51, 0.8);
  border: 1px solid rgba(228, 190, 158, 0);
}
</style>
